<template>
  <div class="container">
    <Breadcrumb :items="['仪表盘', '工作台']" />
    <div class="dashboard">
      <a-spin :loading="loading" style="width: 100%">
        <!-- 顶部数据概览 -->
        <div class="overview-section mb-24">
          <a-row :gutter="16">
            <a-col :span="6">
              <div class="stat-card">
                <div class="stat-card-content">
                  <div class="stat-icon" style="
                      background: linear-gradient(
                        135deg,
                        #1890ff 10%,
                        #096dd9 100%
                      );
                    ">
                    <icon-file />
                  </div>
                  <div class="stat-info">
                    <div class="stat-title">总订单数</div>
                    <div class="stat-value">{{ statistic.orderCount }}</div>
                    <div class="stat-footer">
                      <div class="stat-item">
                        <span>今日：</span>
                        <span class="highlight">{{
                          statistic.todayOrderCount
                        }}</span>
                      </div>
                      <div class="stat-item">
                        <span>本月：</span>
                        <span class="highlight">{{
                          statistic.monthOrderCount
                        }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </a-col>

            <a-col :span="6">
              <div class="stat-card">
                <div class="stat-card-content">
                  <div class="stat-icon" style="
                      background: linear-gradient(
                        135deg,
                        #52c41a 10%,
                        #389e0d 100%
                      );
                    ">
                    <icon-gift />
                  </div>
                  <div class="stat-info">
                    <div class="stat-title">总金额</div>
                    <div class="stat-value">{{
                      formatPrice(statistic.totalOrderAmount)
                    }}</div>
                    <div class="stat-footer">
                      <div class="stat-item">
                        <span>今日：</span>
                        <span class="highlight">{{
                          formatPrice(statistic.todayOrderAmount)
                        }}</span>
                      </div>
                      <div class="stat-item">
                        <span>本月：</span>
                        <span class="highlight">{{
                          formatPrice(statistic.monthOrderAmount)
                        }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </a-col>

            <a-col :span="6">
              <div class="stat-card">
                <div class="stat-card-content">
                  <div class="stat-icon" style="
                      background: linear-gradient(
                        135deg,
                        #722ed1 10%,
                        #531dab 100%
                      );
                    ">
                    <icon-location />
                  </div>
                  <div class="stat-info">
                    <div class="stat-title">站点总数</div>
                    <div class="stat-value">{{ statistic.stationCount }}</div>
                    <div class="stat-footer">
                      <div class="stat-item">
                        <span>今日新增：</span>
                        <span class="highlight">{{
                          statistic.todayStationCount
                        }}</span>
                      </div>
                      <div class="stat-item">
                        <span>本月新增：</span>
                        <span class="highlight">{{
                          statistic.monthStationCount
                        }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </a-col>

            <a-col :span="6">
              <div class="stat-card">
                <div class="stat-card-content">
                  <div class="stat-icon" style="
                      background: linear-gradient(
                        135deg,
                        #13c2c2 10%,
                        #08979c 100%
                      );
                    ">
                    <icon-thunderbolt />
                  </div>
                  <div class="stat-info">
                    <div class="stat-title">充电桩</div>
                    <div class="stat-value-container">
                      <span class="main-value">{{
                        statistic.totalPileCount
                      }}</span>
                      <div class="stat-value-extra">
                        <span class="status-tag success">
                          <span class="dot"></span>
                          在线 {{ statistic.onlinePileCount }}
                        </span>
                        <span class="status-tag warning">
                          <span class="dot"></span>
                          离线 {{ statistic.offlinePileCount }}
                        </span>
                      </div>
                    </div>
                    <div class="stat-footer">
                      <div class="stat-item">
                        <span>今日新增：</span>
                        <span class="highlight">{{
                          statistic.todayPileCount
                        }}</span>
                      </div>
                      <div class="stat-item">
                        <span>本月新增：</span>
                        <span class="highlight">{{
                          statistic.monthPileCount
                        }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </a-col>
          </a-row>
        </div>

        <!-- 平台订单统计和平台充电枪统计并排显示 -->
        <a-row :gutter="24">
          <!-- 平台订单统计 -->
          <a-col :span="16">
            <div class="dashboard-card">
              <div class="dashboard-card-header">
                <div class="dashboard-card-title">
                  <span>订单概览</span>
                </div>
                <div class="dashboard-card-extra">
                  <a-radio-group v-model="timeRange" type="button" @change="handleTimeRangeChange">
                    <a-radio value="today">今日</a-radio>
                    <a-radio value="yesterday">昨日</a-radio>
                    <a-radio value="last7days">近七日</a-radio>
                    <a-radio value="thisMonth">本月</a-radio>
                    <a-radio value="lastMonth">上月</a-radio>
                    <a-radio value="custom">自定义</a-radio>
                  </a-radio-group>
                  <a-range-picker v-if="timeRange === 'custom'" v-model="customDateRange"
                    @change="handleCustomDateChange" style="margin-left: 16px; width: 100%"
                    :placeholder="['开始时间', '结束时间']" allow-clear show-time :time-picker-props="{
                      defaultValue: [dayjs('00:00:00', 'HH:mm:ss'), dayjs('23:59:59', 'HH:mm:ss')]
                    }" format="YYYY-MM-DD HH:mm:ss" />

                  <a-select style="width: 200px; margin-left: 16px" v-model="partnerId" :placeholder="$t('请选择合伙人')"
                    allow-clear allow-search v-if="userInfo.role === 'admin'" :loading="partnerLoading"
                    @change="handleStationChange">
                    <a-option v-for="partner in partnerOptions" :key="partner.id" :value="partner.id">
                      {{ partner.partnerName }}
                    </a-option>
                  </a-select>


                  <a-select v-model="selectedStationId" placeholder="请选择站点" style="width: 200px; margin-left: 16px"
                    allow-clear allow-search filter-option @change="handleStationChange">
                    <a-option v-for="station in stationList" :key="station.id" :value="station.id">
                      {{ station.stationName }}
                    </a-option>
                  </a-select>
                </div>
              </div>
              <div class="dashboard-card-content">
                <a-empty v-if="platformStatistics.length === 0" description="暂无数据" />
                <div v-else class="platform-statistics-container">
                  <div v-for="platform in platformStatistics" :key="platform.platformId"
                    class="platform-statistics-item">
                    <div class="platform-header">
                      <div class="platform-title">
                        <icon-play-circle class="platform-icon" />
                        <span>{{ platform.platformName }}</span>
                      </div>
                      <div class="platform-date">{{
                        platform.statisticDate
                      }}</div>
                    </div>
                    <div class="platform-metrics">
                      <div class="metric-item">
                        <div class="metric-value">{{
                          platform.orderCount || 0
                        }}</div>
                        <div class="metric-label">订单数量(笔)</div>
                      </div>
                      <div class="metric-item">
                        <div class="metric-value highlight-blue">{{
                          formatPrice(platform.totalAmount)
                        }}</div>
                        <div class="metric-label">订单金额(元)</div>
                      </div>
                      <div class="metric-item">
                        <div class="metric-value highlight-orange">{{
                          platform.totalElectricity || 0
                        }}</div>
                        <div class="metric-label">充电电量(kWh)</div>
                      </div>
                      <div class="metric-item">
                        <div class="metric-value highlight-purple">{{
                          platform.fastChargingCapacity || 0
                        }}</div>
                        <div class="metric-label">快充运力(kW)</div>
                      </div>
                    </div>
                    <div class="platform-chart">
                      <div class="chart-title">订单金额与电量趋势</div>
                      <div class="platform-visual-chart" :id="`platform-chart-${platform.platformId}`"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </a-col>

          <!-- 平台充电枪统计 -->
          <a-col :span="8">
            <div class="dashboard-card">
              <div class="dashboard-card-header">
                <div class="dashboard-card-title">
                  <span>充电枪概览</span>
                </div>
              </div>
              <div class="dashboard-card-content">
                <a-spin :loading="platformPileLoading">
                  <a-empty v-if="platformPileStatistics.length === 0" description="暂无数据" />
                  <div v-else class="platform-pile-container">
                    <div v-for="platform in platformPileStatistics" :key="platform.platformId"
                      class="platform-pile-item">
                      <div class="platform-pile-header">
                        <div class="platform-pile-title">{{
                          platform.platformName
                        }}</div>
                        <div class="platform-pile-total">共 {{ platform.totalGunCount }} 个充电枪</div>
                      </div>
                      <div class="platform-pile-content">
                        <div class="platform-pile-info">
                          <div class="pile-info-item">
                            <span class="info-label">
                              <span class="info-dot" style="background-color: #52c41a"></span>
                              空闲充电枪
                            </span>
                            <span class="info-value">{{ platform.idleGunCount }}个</span>
                          </div>
                          <div class="pile-info-item">
                            <span class="info-label">
                              <span class="info-dot" style="background-color: #1890ff"></span>
                              已插枪未充电
                            </span>
                            <span class="info-value">{{ platform.pluggedNotChargingCount }}个</span>
                          </div>
                          <div class="pile-info-item">
                            <span class="info-label">
                              <span class="info-dot" style="background-color: #13c2c2"></span>
                              充电中
                            </span>
                            <span class="info-value">{{ platform.chargingGunCount }}个</span>
                          </div>
                          <div class="pile-info-item">
                            <span class="info-label">
                              <span class="info-dot" style="background-color: #faad14"></span>
                              充电完成未拔枪
                            </span>
                            <span class="info-value">{{ platform.finishedNotUnpluggedCount }}个</span>
                          </div>
                          <div class="pile-info-item">
                            <span class="info-label">
                              <span class="info-dot" style="background-color: #f5222d"></span>
                              故障
                            </span>
                            <span class="info-value">{{ platform.faultGunCount }}个</span>
                          </div>
                        </div>
                        <div class="platform-pie-chart" :id="`platform-pie-${platform.platformId}`"></div>
                      </div>
                    </div>
                  </div>
                </a-spin>
              </div>
            </div>

            <!-- 充电桩状态 -->
            <div class="dashboard-card mt-24">
              <div class="dashboard-card-header">
                <div class="dashboard-card-title">
                  <span>充电桩状态</span>
                </div>
              </div>
              <div class="dashboard-card-content">
                <div class="pile-status-grid">
                  <div class="pile-status-item status-online">
                    <icon-check-circle class="status-icon" />
                    <div class="status-info">
                      <div class="status-value">{{
                        statistic.onlinePileCount
                      }}</div>
                      <div class="status-label">在线充电桩</div>
                    </div>
                  </div>
                  <div class="pile-status-item status-offline">
                    <icon-close-circle class="status-icon" />
                    <div class="status-info">
                      <div class="status-value">{{
                        statistic.offlinePileCount
                      }}</div>
                      <div class="status-label">离线充电桩</div>
                    </div>
                  </div>
                  <div class="pile-status-item status-charging">
                    <icon-sync class="status-icon" />
                    <div class="status-info">
                      <div class="status-value">{{
                        statistic.chargingPileCount
                      }}</div>
                      <div class="status-label">充电中充电桩</div>
                    </div>
                  </div>
                  <div class="pile-status-item status-fault">
                    <icon-exclamation-circle class="status-icon" />
                    <div class="status-info">
                      <div class="status-value">{{
                        statistic.faultPileCount
                      }}</div>
                      <div class="status-label">故障充电桩</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </a-col>
        </a-row>
      </a-spin>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, onUnmounted, watch, nextTick } from 'vue';
import useLoading from '@/hooks/loading';
import { getAllPartners } from '@/api/partner';
import {
  getDashboardStatistic,
  DashboardStatistic,
  PlatformOrderStatistic,
  getPlatformOrderStatistics,
  PlatformPileStatistic,
  getPlatformPileStatistics,
  getOrderAmountAndElectricityTrend,
} from '@/api/dashboard';
import axios from 'axios';
import {
  IconFile,
  IconApps,
  IconDashboard,
  IconLocation,
  IconCheckCircle,
  IconCloseCircle,
  IconSync,
  IconExclamationCircle,
  IconPlayCircle,
  IconThunderbolt,
  IconGift,
} from '@arco-design/web-vue/es/icon';
import dayjs from 'dayjs';
import * as echarts from 'echarts/core';
import { PieChart, BarChart, LineChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import useAppStore from '@/store/modules/app';
import request from '@/utils/request';
import { useUserStore } from '@/store';

// 注册必要的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  PieChart,
  BarChart,
  LineChart,
  CanvasRenderer,
]);

const { loading, setLoading } = useLoading();
const hasData = ref(true); // 可以根据实际数据判断

// 站点列表
const stationList = ref<{ id: number; stationName: string }[]>([]);
const selectedStationId = ref<number | undefined>(undefined);
// 合伙人
const partnerOptions = ref<{ id: number; partnerName: string }[]>([]);
const partnerId = ref<number | undefined>(undefined);
const partnerLoading = ref(false);

// 平台订单统计数据
const platformStatistics = ref<PlatformOrderStatistic[]>([]);
// 平台充电枪统计数据
const platformPileStatistics = ref<PlatformPileStatistic[]>([]);
const platformPileLoading = ref(false);
const userInfo = useUserStore();
// 充电枪饼图实例集合
const pieChartInstances = ref<{ [key: string]: echarts.ECharts }>({});
// 平台订单金额与电量趋势图实例集合
const platformChartInstances = ref<{ [key: string]: echarts.ECharts }>({});

// 时间范围
const timeRange = ref('today');
const customDateRange = ref<[Date, Date] | null>(null);

// 初始化统计数据
const statistic = reactive<DashboardStatistic>({
  // 订单统计
  orderCount: 0,
  totalOrderAmount: 0,
  totalElectricityFee: 0,
  totalServiceFee: 0,

  // 充电设施统计
  stationCount: 0,
  pileCount: 0,
  totalPileCount: 0,
  onlinePileCount: 0,
  offlinePileCount: 0,
  chargingPileCount: 0,
  faultPileCount: 0,

  // 今日数据
  todayOrderCount: 0,
  todayOrderAmount: 0,
  todayStationCount: 0,
  todayPileCount: 0,

  // 本月数据
  monthOrderCount: 0,
  monthOrderAmount: 0,
  monthStationCount: 0,
  monthPileCount: 0,
  enabledStationCount: 0,
});

// 处理时间范围变化
const handleTimeRangeChange = (value: string) => {
  if (value === 'custom') {
    customDateRange.value = null;
  }
  if (value !== 'custom') {
    fetchPlatformStatistics();
  }
};
// 获取客户列表
async function loadPartnerData() {
  partnerLoading.value = true;
  try {
    const res = await getAllPartners({ status: 1 });
    if (res && Array.isArray(res.data)) {
      partnerOptions.value = res.data.map((item: any) => ({
        id: item.id,
        partnerName: item.realName,
      }));
    } else {
      Message.error('获取客户列表失败: 未返回有效数据');
    }
  } catch (error) {
    console.error('获取客户列表异常:', error);
    Message.error('获取客户列表失败');
  } finally {
    partnerLoading.value = false;
  }
}
// 处理日期选择
const handleCustomDateChange = () => {
  if (timeRange.value === 'custom' && customDateRange.value) {
    // 确保时间范围是从00:00:00到23:59:59
    const [startDate, endDate] = customDateRange.value;
    customDateRange.value = [
      dayjs(startDate).startOf('day').toDate(),
      dayjs(endDate).endOf('day').toDate()
    ];
    fetchPlatformStatistics();
  }
};

// 处理站点变化
const handleStationChange = () => {
  fetchPlatformStatistics();
  initPlatformCharts();
};

// 获取平台订单统计数据
const fetchPlatformStatistics = async () => {
  setLoading(true);
  try {
    const params: {
      startTime?: string;
      endTime?: string;
      stationId?: number;
      partnerId?: number;
    } = {};

    if (timeRange.value === 'yesterday') {
      params.startTime = dayjs().subtract(1, 'day').startOf('day').format('YYYY-MM-DD HH:mm:ss');
      params.endTime = dayjs().subtract(1, 'day').endOf('day').format('YYYY-MM-DD HH:mm:ss');
    } else if (timeRange.value === 'today') {
      params.startTime = dayjs().startOf('day').format('YYYY-MM-DD HH:mm:ss');
      params.endTime = dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss');
      // 今日数据按小时排序
      (params as any).hourly = true;
    } else if (timeRange.value === 'last7days') {
      params.startTime = dayjs().subtract(6, 'day').startOf('day').format('YYYY-MM-DD HH:mm:ss');
      params.endTime = dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss');
    } else if (timeRange.value === 'thisMonth') {
      params.startTime = dayjs().startOf('month').format('YYYY-MM-DD HH:mm:ss');
      params.endTime = dayjs().endOf('month').format('YYYY-MM-DD HH:mm:ss');
    } else if (timeRange.value === 'lastMonth') {
      params.startTime = dayjs()
        .subtract(1, 'month')
        .startOf('month')
        .format('YYYY-MM-DD HH:mm:ss');
      params.endTime = dayjs()
        .subtract(1, 'month')
        .endOf('month')
        .format('YYYY-MM-DD HH:mm:ss');
    } else if (timeRange.value === 'custom' && customDateRange.value) {
      params.startTime = dayjs(customDateRange.value[0]).format('YYYY-MM-DD HH:mm:ss');
      params.endTime = dayjs(customDateRange.value[1]).format('YYYY-MM-DD HH:mm:ss');
    }

    if (selectedStationId.value) {
      params.stationId = selectedStationId.value;
    }
    if (partnerId.value) {
      params.partnerId = partnerId.value;
    }

    const response = await getPlatformOrderStatistics(params);
    platformStatistics.value = response.data;

    // 数据加载完成后初始化图表
    setTimeout(() => {
      initPlatformCharts();
    }, 100);
  } catch (error) {
    console.error('获取平台订单统计数据异常:', error);
  } finally {
    setLoading(false);
  }
};

// 获取平台充电枪统计数据
const fetchPlatformPileStatistics = async () => {
  platformPileLoading.value = true;
  try {
    const response = await getPlatformPileStatistics();
    platformPileStatistics.value = response.data;

    // 数据加载完成后初始化图表
    setTimeout(() => {
      initPieCharts();
    }, 100);
  } catch (error) {
    console.error('获取平台充电枪统计数据异常:', error);
  } finally {
    platformPileLoading.value = false;
  }
};

// 初始化饼图
const initPieCharts = () => {
  // 先销毁旧图表
  Object.values(pieChartInstances.value).forEach((chart) => {
    chart.dispose();
  });
  pieChartInstances.value = {};

  // 等待DOM更新完成
  nextTick(() => {
    // 为每个平台创建饼图
    platformPileStatistics.value.forEach((platform) => {
      const chartDom = document.getElementById(
        `platform-pie-${platform.platformId}`
      );
      if (!chartDom) return;

      // 设置容器大小
      chartDom.style.width = '100%';
      chartDom.style.height = '320px';

      const chart = echarts.init(chartDom);
      pieChartInstances.value[`platform-pie-${platform.platformId}`] = chart;

      const option = {
        grid: {
          containLabel: true,
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)',
          backgroundColor: 'rgba(255, 255, 255, 0.9)',
          borderColor: '#eee',
          borderWidth: 1,
          textStyle: {
            color: '#666',
          },
        },
        legend: {
          show: false,
        },
        series: [
          {
            name: '充电枪状态',
            type: 'pie',
            radius: ['40%', '65%'],
            center: ['50%', '50%'],
            avoidLabelOverlap: true,
            itemStyle: {
              borderRadius: 6,
              borderColor: '#fff',
              borderWidth: 2,
            },
            label: {
              show: true,
              position: 'outside',
              formatter: '{b}\n{c}个',
              fontSize: 12,
              color: '#666',
            },
            labelLine: {
              show: true,
              length: 15,
              length2: 10,
              smooth: true,
            },
            emphasis: {
              scale: true,
              scaleSize: 10,
              label: {
                show: true,
                fontSize: 14,
                fontWeight: 'bold',
              },
            },
            data: [
              {
                value: platform.idleGunCount,
                name: '空闲',
                itemStyle: { color: '#52c41a' },
              },
              {
                value: platform.pluggedNotChargingCount,
                name: '已插枪',
                itemStyle: { color: '#1890ff' },
              },
              {
                value: platform.chargingGunCount,
                name: '充电中',
                itemStyle: { color: '#13c2c2' },
              },
              {
                value: platform.finishedNotUnpluggedCount,
                name: '已完成',
                itemStyle: { color: '#faad14' },
              },
              {
                value: platform.faultGunCount,
                name: '故障',
                itemStyle: { color: '#f5222d' },
              },
            ].filter((item) => item.value > 0), // 只显示有数据的状态
          },
        ],
      };

      chart.setOption(option);
      chart.resize();
    });
  });
};

// 监听容器大小变化
const resizeObserver = new ResizeObserver((entries) => {
  entries.forEach((entry) => {
    const chartId = entry.target.id;
    const chart = pieChartInstances.value[chartId];
    if (chart) {
      chart.resize();
    }
  });
});

// 监听数据变化
watch(
  () => platformPileStatistics.value,
  () => {
    nextTick(() => {
      initPieCharts();
    });
  },
  { deep: true }
);

// 初始化平台订单金额与电量趋势图
const initPlatformCharts = async () => {
  // 先销毁旧图表
  Object.values(platformChartInstances.value).forEach((chart) => {
    chart.dispose();
  });
  platformChartInstances.value = {};

  // 为每个平台创建趋势图
  for (const platform of platformStatistics.value) {
    const chartDom = document.getElementById(
      `platform-chart-${platform.platformId}`
    );
    if (!chartDom) continue;

    const chart = echarts.init(chartDom);
    platformChartInstances.value[`platform-chart-${platform.platformId}`] =
      chart;

    // 准备API参数
    const params: {
      platformId?: number;
      startTime: string;
      endTime: string;
      stationId?: number;
      partnerId?: number;
    } = {
      platformId: platform.platformId,
      startTime: '',
      endTime: '',
      stationId: undefined,
      partnerId: partnerId.value,
    };

    if (selectedStationId.value) {
      params.stationId = selectedStationId.value;
    }

    // 根据当前选择的时间范围设置开始和结束时间
    if (timeRange.value === 'yesterday') {
      params.startTime = dayjs().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss');
      params.endTime = dayjs().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss');
    } else if (timeRange.value === 'today') {
      params.startTime = dayjs().startOf('day').format('YYYY-MM-DD HH:mm:ss');
      params.endTime = dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss');
    } else if (timeRange.value === 'last7days') {
      params.startTime = dayjs().subtract(6, 'day').startOf('day').format('YYYY-MM-DD HH:mm:ss');
      params.endTime = dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss');
    } else if (timeRange.value === 'thisMonth') {
      params.startTime = dayjs().startOf('month').format('YYYY-MM-DD HH:mm:ss');
      params.endTime = dayjs().endOf('month').format('YYYY-MM-DD HH:mm:ss');
    } else if (timeRange.value === 'lastMonth') {
      params.startTime = dayjs()
        .subtract(1, 'month')
        .startOf('month')
        .format('YYYY-MM-DD HH:mm:ss');
      params.endTime = dayjs()
        .subtract(1, 'month')
        .endOf('month')
        .format('YYYY-MM-DD HH:mm:ss');
    } else if (timeRange.value === 'custom' && customDateRange.value) {
      params.startTime = dayjs(customDateRange.value[0]).format('YYYY-MM-DD HH:mm:ss');
      params.endTime = dayjs(customDateRange.value[1]).format('YYYY-MM-DD HH:mm:ss');
    } else {
      // 默认显示最近7天
      params.startTime = dayjs().subtract(6, 'day').startOf('day').format('YYYY-MM-DD HH:mm:ss');
      params.endTime = dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss');
    }
    if (partnerId.value) {
      params.partnerId = partnerId.value;
    }

    try {
      // 调用API获取实际趋势数据
      const response = await getOrderAmountAndElectricityTrend(params);
      const trendData = response.data;

      // 从API响应中获取数据
      const dates = trendData.dates || [];
      const amountData = trendData.amountData || [];
      const electricityData = trendData.electricityData || [];

      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
          formatter: function (params: any[]) {
            let tooltip = '';
            const time = params[0].name;

            // 添加标题（时间）
            if (
              timeRange.value === 'today' &&
              (params[0].name.includes(':') || params[0].name.endsWith('时'))
            ) {
              tooltip = `<div style="font-weight:bold;margin-bottom:5px;">${time}</div>`;
            } else {
              tooltip = `<div style="font-weight:bold;margin-bottom:5px;">${time}</div>`;
            }

            // 添加每个系列的数据
            params.forEach((param) => {
              let value = param.value;
              let unit = param.seriesName === '订单金额' ? ' 元' : ' kWh';

              tooltip += `<div style="display:flex;justify-content:space-between;align-items:center;margin:3px 0;">
                <span style="margin-right:10px;">
                  <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background-color:${param.color};margin-right:5px;"></span>
                  <span>${param.seriesName}:</span>
                </span>
                <span style="font-weight:bold;">${value}${unit}</span>
              </div>`;
            });

            return tooltip;
          },
        },
        legend: {
          data: ['订单金额', '充电电量'],
          top: 0,
          right: 0,
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          data: dates,
          axisLine: {
            lineStyle: {
              color: '#E0E0E0',
            },
          },
          axisLabel: {
            color: '#666',
            formatter: function (value: string) {
              // 如果是今日数据（按小时），优化显示格式
              if (timeRange.value === 'today') {
                // 如果日期包含小时信息（如"10:00"或"10时"），只显示小时部分
                if (value.includes(':')) {
                  return value.split(':')[0] + '时';
                } else if (value.endsWith('时')) {
                  return value;
                } else if (value.includes(' ')) {
                  // 如果格式是"2023-05-20 10:00:00"这种，提取小时
                  const timePart = value.split(' ')[1];
                  if (timePart) {
                    return timePart.split(':')[0] + '时';
                  }
                }
              }
              return value;
            },
          },
        },
        yAxis: [
          {
            type: 'value',
            name: '金额',
            position: 'left',
            axisLabel: {
              formatter: '{value} 元',
              color: '#666',
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#1890FF',
              },
            },
            splitLine: {
              lineStyle: {
                color: '#E8E8E8',
                type: 'dashed',
              },
            },
          },
          {
            type: 'value',
            name: '电量',
            position: 'right',
            axisLabel: {
              formatter: '{value} kWh',
              color: '#666',
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#FA8C16',
              },
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: '订单金额',
            type: 'bar',
            barWidth: '40%',
            yAxisIndex: 0,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#83bff6' },
                { offset: 0.5, color: '#188df0' },
                { offset: 1, color: '#188df0' },
              ]),
            },
            emphasis: {
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#2378f7' },
                  { offset: 0.7, color: '#2378f7' },
                  { offset: 1, color: '#83bff6' },
                ]),
              },
            },
            data: amountData,
          },
          {
            name: '充电电量',
            type: 'line',
            yAxisIndex: 1,
            smooth: true,
            symbol: 'emptyCircle',
            symbolSize: 8,
            itemStyle: {
              color: '#FA8C16',
            },
            lineStyle: {
              width: 3,
              shadowColor: 'rgba(0,0,0,0.3)',
              shadowBlur: 10,
              shadowOffsetY: 8,
            },
            data: electricityData,
          },
        ],
      };

      chart.setOption(option);
    } catch (error) {
      console.error('获取订单金额与电量趋势数据异常:', error);
      // 错误处理 - 显示空数据
      chart.setOption({
        title: {
          text: '暂无趋势数据',
          left: 'center',
          top: 'center',
          textStyle: {
            color: '#999',
            fontSize: 14,
            fontWeight: 'normal',
          },
        },
      });
    }
  }
};

// 格式化价格，保留2位小数
const formatPrice = (price: number) => {
  return price ? price.toFixed(2) : '0.00';
};

// 获取工作台统计数据
const fetchDashboardData = async () => {
  setLoading(true);
  try {
    const res = await getDashboardStatistic();
    Object.assign(statistic, res.data);
    hasData.value = statistic.orderCount > 0;
  } catch (error) {
    console.error('获取工作台数据失败:', error);
  } finally {
    setLoading(false);
  }
};

// 获取汽车站点列表API
function getStationList() {
  return request.get('/api/v1/car/charging/group/all');
}

// 获取汽车站点列表
async function fetchStationList() {
  try {
    const res = await getStationList();
    console.log('汽车站点列表数据', res);
    // 确保后端数据映射到我们需要的格式：id对应id，name对应stationName
    if (res.data && Array.isArray(res.data)) {
      stationList.value = res.data.map((item) => ({
        id: item.id,
        stationName: item.stationName || item.name || '未知站点',
      }));
    } else {
      stationList.value = [];
      console.warn('汽车站点列表数据格式不正确', res.data);
    }
  } catch (error) {
    console.error('获取汽车站点列表失败', error);
    stationList.value = [];
  }
}

const appStore = useAppStore();

onMounted(() => {
  customDateRange.value = null;  // 确保初始值为null
  fetchDashboardData();
  fetchStationList();
  fetchPlatformStatistics();
  fetchPlatformPileStatistics();
  loadPartnerData();

  // 延迟初始化图表，确保容器已经渲染
  setTimeout(() => {
    initPieCharts();
    // 监听容器大小变化
    const containers = document.querySelectorAll('.platform-pie-chart');
    containers.forEach((container) => {
      resizeObserver.observe(container);
    });
  }, 300);
});

onUnmounted(() => {
  // 清理图表实例
  Object.values(pieChartInstances.value).forEach((chart) => {
    chart.dispose();
  });
  Object.values(platformChartInstances.value).forEach((chart) => {
    chart.dispose();
  });

  // 清理监听器
  resizeObserver.disconnect();
});
</script>

<style scoped lang="less">
.container {
  padding: 0 20px 20px;
}

.dashboard {
  padding: 16px 0;
}

.mb-24 {
  margin-bottom: 24px;
}

.mt-24 {
  margin-top: 24px;
}

.overview-section {
  margin-bottom: 24px;
}

.stat-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  overflow: hidden;
  height: 100%;

  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  }
}

.stat-card-content {
  padding: 24px;
  display: flex;
  align-items: flex-start;
  position: relative;

  &::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: linear-gradient(to right,
        rgba(0, 0, 0, 0.02),
        rgba(0, 0, 0, 0.06));
  }
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  color: #fff;
  font-size: 24px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  flex-shrink: 0; // 防止图标被压缩

  :deep(svg) {
    width: 24px;
    height: 24px;
  }
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 22px; // 减小字体大小
  font-weight: 600;
  color: var(--color-text-1);
  line-height: 1.2;
  margin-bottom: 16px;
  display: block; // 确保是块级元素
  width: 100%; // 占满宽度
}

.stat-footer {
  display: flex;
  justify-content: flex-start;
  gap: 12px; // 减小间距，让本月数据往左移
  font-size: 13px;
  color: var(--color-text-3);
}

.stat-item {
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;

  span {
    display: inline-block;
    white-space: nowrap;

    &:first-child {
      margin-right: 4px;
    }
  }

  .highlight {
    color: var(--color-text-1);
    font-weight: 500;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 120px;

    &.error {
      color: #f5222d;
    }

    &.warning {
      color: #faad14;
    }
  }
}

.stat-value-container {
  display: flex;
  align-items: center;
  margin-bottom: 16px;

  .main-value {
    font-size: 28px;
    font-weight: 600;
    color: var(--color-text-1);
    line-height: 1.2;
  }
}

.stat-value-extra {
  display: inline-flex;
  gap: 8px;
  margin-left: 12px;

  .status-tag {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;

    .dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      margin-right: 4px;
      display: inline-block;
    }

    &.success {
      background: rgba(82, 196, 26, 0.1);
      color: #52c41a;

      .dot {
        background-color: #52c41a;
        box-shadow: 0 0 0 2px rgba(82, 196, 26, 0.2);
      }
    }

    &.warning {
      background: rgba(250, 173, 20, 0.1);
      color: #faad14;

      .dot {
        background-color: #faad14;
        box-shadow: 0 0 0 2px rgba(250, 173, 20, 0.2);
      }
    }
  }
}

// 响应式调整
@media screen and (max-width: 1400px) {
  .stat-card-content {
    padding: 20px;
  }

  .stat-value {
    font-size: 24px;
  }
}

@media screen and (max-width: 768px) {
  .stat-card {
    margin-bottom: 16px;
  }

  .stat-card-content {
    padding: 16px;
  }

  .stat-icon {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }

  .stat-value {
    font-size: 20px;
    margin-bottom: 12px;
  }

  .stat-footer {
    flex-direction: column;
    gap: 8px;
  }
}

// 区域卡片样式
.dashboard-card {
  background-color: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  margin-bottom: 24px;

  &-header {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #f9fbff, #f0f7ff);
  }

  &-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-1);
    position: relative;
    padding-left: 12px;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 4px;
      height: 18px;
      background: linear-gradient(to bottom, #1890ff, #096dd9);
      border-radius: 2px;
    }

    span {
      white-space: nowrap;
      display: inline-block;
    }
  }

  &-content {
    padding: 24px;
  }
}

// 状态卡片样式
.status-card {
  display: flex;
  align-items: center;
  padding: 28px;
  border-radius: 16px;
  color: #fff;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
  transition: all 0.3s;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    opacity: 0.5;
  }

  &:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18);

    .status-icon {
      transform: scale(1.1);
    }
  }

  &.status-online {
    background: linear-gradient(135deg, #52c41a, #389e0d);
  }

  &.status-offline {
    background: linear-gradient(135deg, #bfbfbf, #8c8c8c);
  }

  &.status-charging {
    background: linear-gradient(135deg, #1890ff, #096dd9);
  }

  &.status-fault {
    background: linear-gradient(135deg, #ff4d4f, #cf1322);
  }

  .status-icon {
    font-size: 50px;
    margin-right: 20px;
    opacity: 0.9;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s;
  }

  .status-info {
    flex: 1;
    position: relative;
    z-index: 2;
  }

  .status-value {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }

  .status-label {
    font-size: 15px;
    opacity: 0.9;
    letter-spacing: 1px;
  }
}

// 平台卡片样式
.platform-card {
  background-color: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
  margin-bottom: 24px;
  transition: all 0.3s;
  overflow: hidden;
  position: relative;

  &:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12);
  }

  &-header {
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;

    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(to right,
          rgba(0, 0, 0, 0),
          rgba(0, 0, 0, 0.06),
          rgba(0, 0, 0, 0));
    }
  }

  &-title {
    display: flex;
    align-items: center;
    font-size: 18px;
    color: var(--color-text-1);
    font-weight: 600;
  }

  &-date {
    color: var(--color-text-3);
    font-size: 14px;
    background: rgba(0, 0, 0, 0.04);
    padding: 4px 10px;
    border-radius: 12px;
  }

  &-content {
    padding: 20px 24px;
  }

  &-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    margin-right: 16px;
    border-radius: 12px;
    font-size: 22px;
    color: #fff;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  }

  &-item {
    display: flex;
    align-items: center;
    padding: 24px;
    border-radius: 12px;
    transition: all 0.3s;
    height: 100%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      height: 6px;
      opacity: 0.8;
    }

    &:hover {
      transform: translateY(-6px);
      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
    }

    &-order {
      background: linear-gradient(135deg, #f0f7ff, #ffffff);

      &::before {
        background: linear-gradient(to right, #1890ff, #40a9ff);
      }

      .platform-card-icon {
        background: linear-gradient(135deg, #1890ff, #096dd9);
      }
    }

    &-amount {
      background: linear-gradient(135deg, #f6ffed, #ffffff);

      &::before {
        background: linear-gradient(to right, #52c41a, #73d13d);
      }

      .platform-card-icon {
        background: linear-gradient(135deg, #52c41a, #389e0d);
      }
    }

    &-electricity {
      background: linear-gradient(135deg, #fff7e6, #ffffff);

      &::before {
        background: linear-gradient(to right, #fa8c16, #ffa940);
      }

      .platform-card-icon {
        background: linear-gradient(135deg, #fa8c16, #d46b08);
      }
    }

    &-power {
      background: linear-gradient(135deg, #f9f0ff, #ffffff);

      &::before {
        background: linear-gradient(to right, #722ed1, #9254de);
      }

      .platform-card-icon {
        background: linear-gradient(135deg, #722ed1, #531dab);
      }
    }
  }

  &-info {
    flex: 1;
  }

  &-label {
    color: var(--color-text-3);
    font-size: 15px;
    margin-bottom: 8px;
  }

  &-value {
    color: var(--color-text-1);
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  }
}

.dashboard-card-extra {
  display: flex;
  align-items: center;
}

// 平台饼图卡片样式
.platform-pie-card {
  background-color: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.3s;

  &:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.12);
  }

  .platform-pie-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-1);
    margin-bottom: 4px;
    text-align: center;
  }

  .platform-pie-subtitle {
    font-size: 14px;
    color: var(--color-text-3);
    margin-bottom: 16px;
    text-align: center;
  }

  .platform-pie-chart {
    height: 240px;
    width: 100%;
  }

  .platform-pie-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 16px;
    gap: 16px;

    .legend-item {
      display: flex;
      align-items: center;
      margin-right: 12px;

      .legend-color {
        width: 12px;
        height: 12px;
        border-radius: 3px;
        margin-right: 6px;
      }

      .legend-label {
        font-size: 14px;
        color: var(--color-text-2);
      }
    }
  }
}

.mb-16 {
  margin-bottom: 16px;
}

// 信息集中式布局样式
.platform-central-stats {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.central-stats-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px;
  background: linear-gradient(135deg, #f0f7ff, #e6f7ff);
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(24, 144, 255, 0.1);
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(to right, #1890ff, #096dd9);
  }

  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(24, 144, 255, 0.15);
    transition: all 0.3s ease;
  }
}

.central-stats-item {
  flex: 1;
  text-align: center;
  padding: 0 20px;
}

.stats-number {
  font-size: 36px;
  font-weight: 700;
  color: #1890ff;
  line-height: 1.2;
  margin-bottom: 8px;
  background: linear-gradient(to right, #1890ff, #096dd9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.stats-label {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.65);
  font-weight: 500;
}

.central-separator {
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom,
      rgba(0, 0, 0, 0.02),
      rgba(0, 0, 0, 0.15),
      rgba(0, 0, 0, 0.02));
}

.surrounding-stats {
  display: flex;
  gap: 16px;
}

.surrounding-stats-item {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 16px;
  border-radius: 12px;
  background: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(233, 233, 233, 0.8);
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  }

  &:first-child {
    border-left: 4px solid #fa8c16;
  }

  &:last-child {
    border-left: 4px solid #722ed1;
  }
}

.surrounding-stats-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  margin-right: 12px;
  font-size: 22px;
  color: white;
}

.electricity-icon {
  background: linear-gradient(135deg, #fa8c16, #d4730c);
  box-shadow: 0 4px 8px rgba(250, 140, 22, 0.25);
}

.power-icon {
  background: linear-gradient(135deg, #722ed1, #531dab);
  box-shadow: 0 4px 8px rgba(114, 46, 209, 0.25);
}

.surrounding-stats-content {
  flex: 1;
}

.surrounding-stats-label {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.45);
  margin-bottom: 4px;
}

.surrounding-stats-value {
  font-size: 22px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.85);
}

// 数据可视化组合样式
.platform-chart-stats {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 16px;
}

.key-metrics-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: linear-gradient(145deg, #f9fafc, #f0f2f5);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  flex-wrap: nowrap;
  overflow-x: auto;
}

.key-metric {
  text-align: center;
  padding: 0 12px;
  position: relative;
  flex: 1 0 auto;
  min-width: 120px;
  white-space: nowrap;

  &:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 15%;
    height: 70%;
    width: 1px;
    background: linear-gradient(to bottom,
        rgba(0, 0, 0, 0.03),
        rgba(0, 0, 0, 0.1),
        rgba(0, 0, 0, 0.03));
  }
}

.key-metric-value {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 8px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  &.highlight-blue {
    color: #1890ff;
  }

  &.highlight-orange {
    color: #fa8c16;
  }

  &.highlight-purple {
    color: #722ed1;
  }
}

.key-metric-label {
  font-size: 14px;
  color: #666;
  white-space: nowrap;
}

.chart-container {
  background: white;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border: 1px solid #f0f0f0;
}

.chart-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
  text-align: center;
}

.platform-visual-chart {
  height: 280px;
  width: 100%;
}

// 平台统计样式
.platform-statistics-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.platform-statistics-item {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: all 0.3s;

  &:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
  }
}

.platform-header {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #f9fbff, #f0f7ff);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.platform-title {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-1);

  .platform-icon {
    font-size: 24px;
    margin-right: 12px;
    color: #1890ff;
  }
}

.platform-date {
  font-size: 14px;
  color: var(--color-text-3);
  background: rgba(0, 0, 0, 0.04);
  padding: 4px 12px;
  border-radius: 12px;
}

.platform-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 24px;
  background: linear-gradient(135deg, #f9fafc, #f0f2f5);
}

.metric-item {
  text-align: center;
  padding: 16px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s;

  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  }
}

.metric-value {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--color-text-1);

  &.highlight-blue {
    color: #1890ff;
  }

  &.highlight-orange {
    color: #fa8c16;
  }

  &.highlight-purple {
    color: #722ed1;
  }
}

.metric-label {
  font-size: 14px;
  color: var(--color-text-3);
}

.platform-chart {
  padding: 24px;

  .chart-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-1);
    margin-bottom: 16px;
    text-align: center;
  }
}

// 充电枪统计样式
.platform-pile-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.platform-pile-item {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  transition: all 0.3s;

  &:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
  }
}

.platform-pile-header {
  text-align: center;
  margin-bottom: 16px;
}

.platform-pile-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-1);
  margin-bottom: 4px;
}

.platform-pile-total {
  font-size: 14px;
  color: var(--color-text-3);
}

.platform-pile-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding: 0 20px;
  height: 320px;
}

.platform-pile-info {
  flex: 0 0 45%;
  padding-right: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.pile-info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 8px 12px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.02), transparent);
  border-radius: 6px;
  transition: all 0.3s;

  &:hover {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.05), transparent);
    transform: translateX(4px);
  }

  &:last-child {
    margin-bottom: 0;
  }
}

.info-label {
  display: flex;
  align-items: center;
  color: var(--color-text-2);
  font-size: 14px;
}

.info-value {
  color: var(--color-text-1);
  font-weight: 600;
  font-size: 15px;
}

.info-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
  position: relative;

  &::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 50%;
    background: inherit;
    opacity: 0.2;
  }
}

.platform-pie-chart {
  flex: 0 0 55%;
  width: 55% !important;
  height: 320px !important;
  position: relative;

  &::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10%;
    bottom: 10%;
    width: 1px;
    background: linear-gradient(to bottom,
        transparent,
        rgba(0, 0, 0, 0.06),
        transparent);
  }
}

// 充电桩状态网格样式
.pile-status-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.pile-status-item {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  display: flex;
  align-items: center;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
  }

  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
  }

  &.status-online {
    background: linear-gradient(135deg, #f6ffed, #ffffff);

    &::before {
      background: linear-gradient(to right, #52c41a, #73d13d);
    }

    .status-icon {
      color: #52c41a;
    }
  }

  &.status-offline {
    background: linear-gradient(135deg, #f5f5f5, #ffffff);

    &::before {
      background: linear-gradient(to right, #bfbfbf, #d9d9d9);
    }

    .status-icon {
      color: #bfbfbf;
    }
  }

  &.status-charging {
    background: linear-gradient(135deg, #e6f7ff, #ffffff);

    &::before {
      background: linear-gradient(to right, #1890ff, #40a9ff);
    }

    .status-icon {
      color: #1890ff;
    }
  }

  &.status-fault {
    background: linear-gradient(135deg, #fff1f0, #ffffff);

    &::before {
      background: linear-gradient(to right, #f5222d, #ff4d4f);
    }

    .status-icon {
      color: #f5222d;
    }
  }
}

.status-icon {
  font-size: 32px;
  margin-right: 16px;
}

.status-info {
  flex: 1;
}

.status-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text-1);
  margin-bottom: 4px;
}

.status-label {
  font-size: 14px;
  color: var(--color-text-3);
}

// 响应式布局调整
@media screen and (max-width: 1400px) {
  .platform-pile-content {
    flex-direction: column;
    height: auto;
    min-height: 600px;
  }

  .platform-pile-info {
    flex: none;
    width: 100%;
    padding-right: 0;
    margin-bottom: 24px;
    height: auto;
  }

  .platform-pie-chart {
    flex: none;
    width: 100% !important;
    height: 300px !important;

    &::before {
      display: none;
    }
  }
}

@media screen and (max-width: 1200px) {
  .platform-pile-legend {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 768px) {
  .platform-metrics {
    grid-template-columns: 1fr;
  }
}
</style>
